<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <PageTool :show-before="true">
          <template v-slot:before>
            <el-button type="primary" size="small" @click="add">添加客户</el-button>
          </template>
          <template v-slot:after>
            <!-- <el-select slot="prepend" v-model="select" placeholder="全部经纪">
              <el-option label="餐厅名" value="1" />
              <el-option label="订单号" value="2" />
              <el-option label="用户电话" value="3" />
            </el-select> -->
            <el-input placeholder="请输入关键字">
              <template slot="append">筛选</template>
            </el-input>
          </template>
        </PageTool>
        <template>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="image" label="图片" width="155px">
              <template v-slot="{row}">
                <img class="img" :src="row.image" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="155px" />
            <el-table-column prop="email" label="邮箱" width="155px" />
            <el-table-column prop="email" label="电话" width="155px" />
            <el-table-column prop="date" label="经纪" width="155px" />
            <el-table-column prop="wechat" label="微信" width="155px" />
            <el-table-column prop="image" label="介绍" width="155px" />
            <el-table-column prop="address" label="操作">
              <template v-slot="{row}">
                <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-card>
      <dialogVue ref="form" :show-dialog.sync="showDialog" @update="showDialog =false" />
    </div>
  </div>
</template>
<script>
import { Getclients, delclients } from '@/api/model/clients'
import dialogVue from './dialog/dialog.vue'
export default {
  components: { dialogVue },
  data() {
    return {
      tableData: [],
      showDialog: false,
      params: {
        _limit: 5,
        _start: 0
      }
    }
  },
  async created() {
    await this.getClientList()
  },
  methods: {
    edit(id) {
      this.showDialog = true
      this.$refs.form.getClistyInfo(id)
    },
    // 新增
    add() {
      this.showDialog = true
    },
    async del(id) {
      this.$confirm('确定删除该员工吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        await delclients(id)
      })
      this.getClientList()
    },
    // 获取列表
    async getClientList() {
      const res = await Getclients(this.params)
      // console.log(res)
      this.tableData = res.data
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-table td {
  padding: 90px 0;
}
.img {
  height: 200px;
  width: 200px;
}
</style>

